<template>
  <div id="shadow-demo">
    <div
      v-if="Platform === 'android'"
      class="no-offset-shadow-demo-cube-android"
    >
      <div class="no-offset-shadow-demo-content-android">
        <p>没有偏移阴影样式</p>
      </div>
    </div>
    <div
      v-if="Platform === 'ios'"
      class="no-offset-shadow-demo-cube-ios"
    >
      <div class="no-offset-shadow-demo-content-ios">
        <p>没有偏移阴影样式</p>
      </div>
    </div>
    <div
      v-if="Platform === 'android'"
      class="offset-shadow-demo-cube-android"
    >
      <div class="offset-shadow-demo-content-android">
        <p>偏移阴影样式</p>
      </div>
    </div>
    <div
      v-if="Platform === 'ios'"
      class="offset-shadow-demo-cube-ios"
    >
      <div class="offset-shadow-demo-content-ios">
        <p>偏移阴影样式</p>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Native } from '@hippy/vue-next';
import { defineComponent } from '@vue/runtime-core';

export default defineComponent({
  setup() {
    return {
      Platform: Native.Platform,
    };
  },
});
</script>
<style scoped>
#shadow-demo {
  flex: 1;
}

/**
 * P.S. Android shadow size is based on the container size
 * and a solid shadow background exists.
 * You should make content fully cover the solid shadow background
 * whose size is determined by container size, shadowRadius and shadowOffset,
 * so Android container with shadow(170*170) should be bigger than content(160*160),
 * and set some offset(e.g. top or left) for content to cover shadow background.
 *
 * boxShadow consists attrs as follow：boxShadowOpacity，boxShadowRadius，boxShadowColor，
 * boxShadowOffsetX，boxShadowOffsetY，boxShadowSpread(iOS only).
 *
 * 注意: Android的阴影大小根据容器体积大小来决定，通过在容器上对矩形view做阴影来实现，阴影会有一个实体的背景色。
 * 因此必须用content内容去遮挡住阴影的实体背景，该背景由容器大小、阴影圆角和阴影偏移共同决定。
 * Android带有阴影的Container容器大小(170*170)必须大于Content内容的大小(160*160)，
 * 同时要将Content内容做一定的偏移（如top或者left）来遮盖阴影背景。
 *
 * boxShadow支持以下属性：box-shadow-opacity，box-shadow-radius，box-shadow-color，
 * box-shadow-offset, box-shadow-offset-x，box-shadow-offset-y，box-shadow-spread(仅iOS).
 *
 * if you use border-radius, Android container & content both should be set.
 * 如果设置了border-radius，在Android上必须同时在Container容器和Content内容同时设置该属性。
 */
#shadow-demo .no-offset-shadow-demo-cube-android {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 170px;
  height: 170px;
  box-shadow-opacity: 0.6;
  box-shadow-radius: 5;
  box-shadow-color: #098a29;
  /* container & content should both set radius */
  /* 容器和内容都要设置border-radius */
  border-radius: 5px;
}

#shadow-demo .no-offset-shadow-demo-content-android {
  position: absolute;
  /* android set left & top offset to cover shadow solid background */
  /* android 设置left和top偏移来遮挡阴影实体背景 */
  left: 5px;
  top: 5px;
  width: 160px;
  height: 160px;
  background-color: grey;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#shadow-demo .no-offset-shadow-demo-content-android p {
  color: white;
}

#shadow-demo .no-offset-shadow-demo-cube-ios {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 160px;
  height: 160px;
  box-shadow-opacity: 0.6;
  box-shadow-radius: 5;
  /* spread attr is only supported on iOS */
  /* spread 属性仅适用于iOS */
  box-shadow-spread: 1;
  box-shadow-color: #098a29;
  /* container & content should both set radius */
  /* 容器和内容都要设置border-radius */
  border-radius: 5px;
}

#shadow-demo .no-offset-shadow-demo-content-ios {
  width: 160px;
  height: 160px;
  background-color: grey;
  border-radius: 5px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

#shadow-demo .no-offset-shadow-demo-content-ios p {
  color: white;
}

/**
 * P.S. Android shadow size is based on the container size
 * and a solid shadow background exists.
 * Shadow offset is not fully supported on Android.
 * if you have to use boxShadowOffset,
 * the tricky methods below is for reference on both Android and iOS.
 *
 * 注意: Android 的阴影大小根据容器体积大小来决定，通过在容器上对矩形view做阴影来实现，阴影会有一个实体的背景色。
 * 在Android上shadow offset没有很好地支持。
 * 如果你必须要使用boxShadowOffset，可以通过以下的小技巧来调整适配。
 */
#shadow-demo .offset-shadow-demo-cube-android {
  position: absolute;
  left: 50px;
  top: 300px;
  width: 175px;
  height: 175px;
  box-shadow-opacity: 0.6;
  box-shadow-radius: 5;
  box-shadow-color: #098a29;
  box-shadow-offset: 15px 15px;
  /*box-shadow-offset-x: 15px;*/ /* it is supported by setting offset separately
    /*box-shadow-offset-y: 15px;*/
}

#shadow-demo .offset-shadow-demo-content-android {
  width: 160px;
  height: 160px;
  background-color: grey;
  display: flex;
  justify-content: center;
  align-items: center;
}

#shadow-demo .offset-shadow-demo-content-android p {
  color: white
}

#shadow-demo .offset-shadow-demo-cube-ios {
  position: absolute;
  left: 50px;
  top: 300px;
  width: 160px;
  height: 160px;
  box-shadow-opacity: 0.6;
  box-shadow-radius: 5;
  box-shadow-spread: 1; /* spread attr is only supported on iOS */
  box-shadow-offset: 10px 10px;
  /*box-shadow-offset-x: 10px;*/ /* it is supported by setting offset separately
    /*box-shadow-offset-y: 10px;*/
  box-shadow-color: #098a29;
}

#shadow-demo .offset-shadow-demo-content-ios {
  width: 160px;
  height: 160px;
  background-color: grey;
  justify-content: center;
  align-items: center;
}

#shadow-demo .offset-shadow-demo-content-ios p {
  color: white;
}
</style>
